<template>
  <div class="programbox">
    <el-card shadow="always" style="margin-right: 2vw">
      <div style="margin: 20px">程序进度</div>
      <div style="height: 70vh; width: 15vw">
        <el-steps direction="vertical" :active="active">
          <el-step title="文件解析"></el-step>
          <el-step title="程序生成"></el-step>
          <el-step title="程序地址"></el-step>
        </el-steps>
      </div>
    </el-card>
    <el-card
      shadow="always"
      class="file"
      v-loading="loading"
      element-loading-text="正在加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)">
      <div>
        <div style="margin: 20px 0px 0px 20px">
          <!-- <span>文件导入</span> <button @click="test">测试</button> -->
          <!-- <button @click="addressbut">程序地址</button> -->
        </div>

        <div style="display: flex; flex-direction: column">
          <div
            style="
              display: flex;
              justify-content: space-evenly;
              margin-top: 5vh;
            ">
            <div class="filebox">
              <!-- <div>点击选择导入Meta A文件</div> -->
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                ">
                <img
                  src="@/assets/img/fileup.png"
                  alt=""
                  style="height: 10vh" />
                <div>
                  <el-tag :type="type1">{{ fileName1 }}</el-tag>
                </div>
              </div>
              <div class="file-upload-container">
<!--                <input-->
<!--                  type="file"-->
<!--                  @change="handleFileUpload1"-->
<!--                  style="display: none"-->
<!--                  ref="fileInput1" />-->
<!--                <button @click="selectFile1" style="width: 200px">-->
<!--                  {{ button1 }}-->
<!--                </button>-->
                <el-select v-model="metaA" placeholder="请选择" style="width: 200px" @change="handleFileUpload1" @focus="getMetaA">
                  <el-option
                      v-for="item in metaAOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="filebox">
              <!-- <div>点击选择导入Meta B文件</div> -->
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                ">
                <img
                  src="@/assets/img/fileup.png"
                  alt=""
                  style="height: 10vh" />
                <div>
                  <el-tag :type="type2">{{ fileName2 }}</el-tag>
                </div>
              </div>
              <div class="file-upload-container">
<!--                <input-->
<!--                  type="file"-->
<!--                  @change="handleFileUpload2"-->
<!--                  style="display: none"-->
<!--                  ref="fileInput2" />-->
<!--                <button @click="selectFile2" style="width: 200px">-->
<!--                  {{ button2 }}-->
<!--                </button>-->
                <el-select v-model="metaB" placeholder="请选择" style="width: 200px" @change="handleFileUpload2" @focus="getMetaB">
                  <el-option
                      v-for="item in metaBOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="filebox">
              <!-- <div>点击选择导入转换规则描述文件</div> -->
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                ">
                <img
                  src="@/assets/img/fileup.png"
                  alt=""
                  style="height: 10vh" />
                <div>
                  <el-tag :type="type3">{{ fileName3 }}</el-tag>
                </div>
              </div>
              <div class="file-upload-container">
<!--                <input-->
<!--                  type="file"-->
<!--                  @change="handleFileUpload3"-->
<!--                  style="display: none"-->
<!--                  ref="fileInput3" />-->
<!--                <button @click="selectFile3" style="width: 200px">-->
<!--                  {{ button3 }}-->
<!--                </button>-->
                <el-select v-model="rule" placeholder="请选择" style="width: 200px" @change="handleFileUpload3" @focus="getRule">
                  <el-option
                      v-for="item in ruleOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="filebox">
              <!-- <div>点击选择导入TestA文件</div> -->
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                ">
                <img
                  src="@/assets/img/fileup.png"
                  alt=""
                  style="height: 10vh" />
                <div>
                  <el-tag :type="type4">{{ fileName4 }}</el-tag>
                </div>
              </div>
              <div class="file-upload-container">
                <input
                  type="file"
                  @change="handleFileUpload4"
                  style="display: none"
                  ref="fileInput4" />
                <button @click="selectFile4" style="width: 200px;height: 40px">
                  {{ button4 }}
                </button>
              </div>
            </div>
          </div>
          <!-- <div
            style="
              display: flex;
              justify-content: space-evenly;
              margin-top: 5vh;
            ">
            <div class="filebox">
              <div>点击选择导入转换规则描述文件</div>
              <div class="file-upload-container">
                <input
                  type="file"
                  @change="handleFileUpload3"
                  style="display: none"
                  ref="fileInput3" />
                <button @click="selectFile3">选择文件</button>
              </div>
              {{ fileName3 }}
            </div>
            <div class="filebox">
              <div>点击选择导入TestA文件</div>
              <div class="file-upload-container">
                <input
                  type="file"
                  @change="handleFileUpload4"
                  style="display: none"
                  ref="fileInput4" />
                <button @click="selectFile4">选择文件</button>
              </div>
              {{ fileName4 }}
            </div>
          </div> -->
        </div>

        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          style="margin-top: 20px">
          <div style="display: flex; justify-content: space-evenly">
            <el-form-item label="输入协议类型">
              <el-select
                v-model="form.enterProtocolType"
                placeholder="请选择输入协议类型" @change="cha(form.enterProtocolType)">
                <el-option label="byte" value="byte"></el-option>
                <el-option label="json" value="json"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="输出协议类型">
              <el-select
                v-model="form.outputProtocolType"
                placeholder="请选择输出协议类型"
                @change="cha(form.outputProtocolType)">
                <el-option label="byte" value="byte"></el-option>
                <el-option label="json" value="json"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="jar包名称">
              <el-input
                v-model="form.jarName"
                placeholder="请输入jar包名称"
                @input="cha(form.jarName)"></el-input>
            </el-form-item>
          </div>
          <div style="display: flex; justify-content: space-evenly">
            <el-form-item label="是否需要转码">
              <el-select
                v-model="form.needTranscoding"
                placeholder="请选择是否需要转码"
                @change="cha(form.needTranscoding)">
                <el-option label="true" value= 1></el-option>
                <el-option label="false" value= 0></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否需要解码">
              <el-select
                v-model="form.needDecoding"
                placeholder="请选择是否需要解码"
                @change="cha(form.needDecoding)">
                <el-option label="true" value=1></el-option>
                <el-option label="false" value=0></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="版本">
              <el-input
                v-model="form.version"
                placeholder="请输入版本"
                @input="cha(form.version)"></el-input>
            </el-form-item>
          </div>
          <el-form-item>
            <div class="generatebbtn">
              <!-- <el-button
                @click="ceshi"
                type="primary"
                style="width: 200px"></el-button> -->
              <el-button
                type="primary"
                @click="generate"
                style="width: 200px"
                :disabled="disabled1"
                >程序生成</el-button
              >
              <el-button
                type="primary"
                @click="test"
                style="width: 200px"
                :disabled="disabled2"
                >文件测试</el-button
              >
            </div>
          </el-form-item>
        </el-form>

        <div class="address">
          <div v-show="show1"><img src="@/assets/img/yes.png" alt="" /></div>
          <div v-show="show2"><img src="@/assets/img/no.png" alt="" /></div>
          <div style="margin-top: 10px">{{ address }}</div>
          <div v-show="show3" style="margin-top: 10px">
            <img src="@/assets/img/yes.png" alt="" />
          </div>
          <div v-show="show4" style="margin-top: 10px">
            <img src="@/assets/img/no.png" alt="" />
          </div>
          <div style="margin-top: 10px">{{ fileText }}</div>
        </div>
        <!-- <div style="margin-top: 20px; text-align: center">{{ testtext }}</div> -->
      </div>
      <div>
        {{ text }}
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text:"",
        filePath1: "",
        filePath2: "",
        filePath3: "",
        filePath4: null,
        fileName1: "请选择 Meta A文件",
        fileName2: "请选择 Meta B文件",
        fileName3: "请选择规则描述文件",
        fileName4: "请选择 Test A文件",
        metaA:null,
        metaB:null,
        rule:null,
        metaAOptions:[
            {id:1,name:"测试1"},
            {id:2,name:"测试2"}
        ],
        metaBOptions:[
          {id:1,name:"测试3"},
          {id:2,name:"测试4"}
        ],
        ruleOptions:[
          {id:1,name:"测试5"},
          {id:2,name:"测试6"}
        ],
        testtext: null,
        active: 1,
        loading: false,
        button1: "选择 Meta A文件",
        button2: "选择 Meta B文件",
        button3: "选择规则描述文件",
        button4: "选择 Test A文件",
        fileText: "",
        address: "",
        type1: "danger",
        type2: "danger",
        type3: "danger",
        type4: "danger",
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        disabled1: true,
        disabled2: true,
        form: {
          //输入协议类型
          enterProtocolType: null,
          //输出协议类型
          outputProtocolType: null,
          //jar包名称
          jarName: null,
          //需要转码
          needTranscoding: null,
          //需要解码
          needDecoding: null,
          // 版本
          version: null,
        },
      };
    },
    created() {
      this.init();
    },
    mounted() {
    },
    computed: {
    },
    methods: {
      init(){
        this.getMetaA();
        this.getMetaB();
        this.getRule();
      },
      getMetaA(){
        let item = {
          "type":1
        };
        let itemJson = JSON.stringify(item);
        let result = window.iMeta.findMetaList(itemJson,1,100);
        let res = JSON.parse(result);
        this.metaAOptions = res.data.dataList;

      },
      getMetaB(){
        let item = {
          "type":2
        };
        let itemJson = JSON.stringify(item);
        let result = window.iMeta.findMetaList(itemJson,1,100);
        let res = JSON.parse(result);
        this.metaBOptions = res.data.dataList;
      },
      getRule(){
        let item = {
        };
        let itemJson = JSON.stringify(item);
        let result = window.iRule.findList(itemJson,1,100);
        let res = JSON.parse(result);
        this.ruleOptions = res.data.dataList;
      },
      //文件测试按钮状态
      btnStatus1() {
          this.metaA && this.metaB && this.rule&&this.form.enterProtocolType&&this.form.outputProtocolType&&this.form.jarName&&this.form.version&&this.form.needDecoding&&this.form.needTranscoding  !== null
            ? this.disabled1 = false
            : this.disabled1 = true;
      },
      //程序生成测试按钮状态
      btnStatus2() {
       this.metaA && this.metaB && this.rule && this.filePath4!== null
            ? this.disabled2 = false
            : this.disabled2 = true;
      },
      cha(value){
        if (value==null){
          this.disabled1 = true;
        }else if(value ==""){
          this.disabled1 = true;
        }else{
          this.btnStatus1()
        }
      },
      selectFile1() {
        this.$refs.fileInput1.click();
      },
      handleFileUpload1(event) {
        // const file = event.target.files[0];
        // if (!file) {
        //   alert("请选择一个文件");
        //   return;
        // }
        // // 检查文件类型是否为 JSON
        // const fileExtension = file.name.split(".").pop().toLowerCase();
        // if (fileExtension !== "json" && fileExtension !== "txt") {
        //   this.$message.error("只允许上传json或txt格式的文件");
        //   return;
        // }
        // this.filePath1 = file.name;
        // const fileName = file.name.split("\\").pop();
        // this.fileName1 = fileName.split(".")[0];
        if (this.metaA!==null) {
          this.fileName1 = "已选择";
          this.type1 = "";
        }
        if (
          (this.type1 == "") &
          (this.type2 == "") &
          (this.type3 == "") &
          (this.type4 == "")
        ) {
          this.active = 2;
        }
        this.btnStatus1();
        this.btnStatus2();
        // let item = {
        //   // key: this.fileName1,
        //   key: "MetaA",
        //   path: this.filePath1,
        // };
        // let itemAdd = JSON.stringify(item);
        // let result = window.iTest.upload(itemAdd);
        // let res = JSON.parse(result);
        // if (res.code == 1) {
        //   this.$message.success(res.msg);
        // } else {
        //   this.$message.error(res.msg);
        // }
        // this.$refs.fileInput1.value = null;
      },

      selectFile2() {
        this.$refs.fileInput2.click();
      },
      handleFileUpload2(event) {
        // const file = event.target.files[0];
        // if (!file) {
        //   alert("请选择一个文件");
        //   return;
        // }
        // // 检查文件类型是否为 JSON
        // const fileExtension = file.name.split(".").pop().toLowerCase();
        // if (fileExtension !== "json" && fileExtension !== "txt") {
        //   this.$message.error("只允许上传json或txt格式的文件");
        //   return;
        // } else {
        //   this.filePath2 = file.name;
        //   const fileName = file.name.split("\\").pop();
        //   this.fileName2 = fileName.split(".")[0];
          if (!this.fileName) {
            this.fileName2 = "已选择";
            this.type2 = "";
          }
          if (
            (this.type1 == "") &
            (this.type2 == "") &
            (this.type3 == "") &
            (this.type4 == "")
          ) {
            this.active = 2;
          }
        this.btnStatus1();
        this.btnStatus2();
        //   let item = {
        //     // key: this.fileName2,
        //     key: "MetaB",
        //     path: this.filePath2,
        //   };
        //   let itemAdd = JSON.stringify(item);
        //   let result = window.iTest.upload(itemAdd);
        //   let res = JSON.parse(result);
        //   if (res.code == 1) {
        //     this.$message.success(res.msg);
        //   } else {
        //     this.$message.error(res.msg);
        //   }
        //   this.$refs.fileInput2.value = null;
        // }
      },
      selectFile3() {
        this.$refs.fileInput3.click();
      },
      handleFileUpload3(event) {
        // const file = event.target.files[0];
        // if (!file) {
        //   alert("请选择一个文件");
        //   return;
        // }
        // // 检查文件类型是否为 JSON
        // const fileExtension = file.name.split(".").pop().toLowerCase();
        // if (fileExtension !== "json" && fileExtension !== "txt") {
        //   this.$message.error("只允许上传json或txt格式的文件");
        //   return;
        // } else {
        //   this.filePath3 = file.name;
        //   const fileName = file.name.split("\\").pop();
        //   this.fileName3 = fileName.split(".")[0];
        //
        //   let item = {
        //     // key: this.fileName3,
        //     key: "Rule",
        //     path: this.filePath3,
        //   };
        //   let itemAdd = JSON.stringify(item);
        //   let result = window.iTest.upload(itemAdd);
        //   let res = JSON.parse(result);
        //   if (res.code == 1) {
        //     this.$message.success(res.msg);
        //   } else {
        //     this.$message.error(res.msg);
        //   }
        //   this.$refs.fileInput3.value = null;
        // }
        this.btnStatus1();
        this.btnStatus2();
        if (this.rule!==null) {
          this.fileName3 = "已选择";
          this.type3 = "";
        }
        if (
            (this.type1 == "") &
            (this.type2 == "") &
            (this.type3 == "") &
            (this.type4 == "")
        ) {
          this.active = 2;
        }
      },
      selectFile4() {
        // this.$refs.fileInput4.click();
        let key = "TestA";
        let result = window.iTest.upload(key);
        let res = JSON.parse(result);
        if (res.code == 1 ) {
          this.fileName4 = "已选择";
          this.type4 = "";
          this.filePath4= 1
        }
        if (
            (this.type1 == "") &
            (this.type2 == "") &
            (this.type3 == "") &
            (this.type4 == "")
        ) {
          this.active = 2;
        }
        this.btnStatus1();
        this.btnStatus2();
      },
      handleFileUpload4(event) {
        // const file = event.target.files[0];
        // if (!file) {
        //   alert("请选择一个文件");
        //   return;
        // }
        // // 检查文件类型是否为 JSON
        // const fileExtension = file.name.split(".").pop().toLowerCase();
        // if (fileExtension !== "json" && fileExtension !== "txt") {
        //   this.$message.error("只允许上传json或txt格式的文件");
        //   return;
        // } else {
        //   this.filePath4 = file.name;
        //   const fileName = file.name.split("\\").pop();
        //   this.fileName4 = fileName.split(".")[0];
        //
        //   let item = {
        //     // key: this.fileName4,
        //     key: "TestA",
        //     path: this.filePath4,
        //   };
        //   let itemAdd = JSON.stringify(item);
        //   let result = window.iTest.upload(itemAdd);
        //   let res = JSON.parse(result);
        //   if (res.code == 1) {
        //     this.$message.success(res.msg);
        //   } else {
        //     this.$message.error(res.msg);
        //   }
        //   this.$refs.fileInput4.value = null;
        // }
        // this.btnStatus1();
        // this.btnStatus2();
        // if (!this.fileName) {
        //   this.button4 = "修改 Test A文件";
        //   this.type4 = "";
        // }
        // if (
        //     (this.type1 == "") &
        //     (this.type2 == "") &
        //     (this.type3 == "") &
        //     (this.type4 == "")
        // ) {
        //   this.active = 2;
        // }
      },

      exceed() {
        this.$alert(
          "只能选择一个JSON文件，如需重新选择请删除后选择",
          "异常提示",
          {
            confirmButtonText: "确定",
            type: "warning",
          }
        )
          .then(() => {})
          .catch(() => {}); // 添加错误捕获);;
      },
      //程序生成
      generate() {
        this.loading = true;
        let data = {
          metaAId: Number(this.metaA),
          metaBId: Number(this.metaB),
          ruleId: Number(this.rule),
          enterProtocolType: this.form.enterProtocolType,
          outputProtocolType: this.form.outputProtocolType,
          JarName: this.form.JarName,
          needTranscoding:  Boolean(Number(this.form.needTranscoding)),
          needDecoding: Boolean (Number(this.form.needDecoding)),
          version:  this.form.version,
        };
        let obj = JSON.stringify(data);
        let result = window.iTest.dynamicCompilation(obj);
        let res = JSON.parse(result);
        if (res.code == 1) {
          setTimeout(() => {
            this.loading = false;
            this.$message.success(res.msg);
            this.show1 = true;
            this.address = "程序生成路径：" + res.data;
            this.active = 3;
          }, 1000);
        } else {
          setTimeout(() => {
            this.loading = false;
            this.show2 = true;
            this.address = "程序生成失败";
            this.$message.error(res.msg);
          }, 1000);
        }
      },
      test() {
        this.loading = true;
        let result = window.iTest.testByte();
        // let result = window.iTest.dynamicCompilation();
        let res = JSON.parse(result);
        if (res.code == 1) {
          setTimeout(() => {
            this.loading = false;
            this.$message.success(res.msg);
            this.show3 = true;
            this.fileText = res.data;
            this.active = 3;
          }, 1000);
        } else {
          setTimeout(() => {
            this.loading = false;
            this.show4 = true;
            this.fileText = "文件测试失败";
            this.$message.error(res.msg);
          }, 1000);
        }
      },
      ceshi() {
        let data = JSON.stringify(this.form);
        console.log("🚀 ~ ceshi ~ data:", data);
      },
    },
  };
</script>

<style>
  /* .el-upload-dragger {
    width: 360px !important;
  } */
  .file {
    width: 100%;
    height: 100%;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .filebox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  /* 隐藏上传文件后绿色对号 */
  .el-upload-list__item .el-icon-upload-success {
    display: none;
  }

  /* 隐藏Element UI的el-upload组件的进度条 */
  .el-upload__tip,
  .el-progress {
    display: none !important;
  }

  /* 容器样式 */
  .file-upload-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    /* width: 400px; */
  }

  /* 隐藏的文件输入框 */
  .file-upload-container input[type="file"] {
    display: none;
  }

  /* 选择文件按钮样式 */
  .file-upload-container button {
    background-color: #4caf50;
    border: none;
    color: white;
    //padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    //margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
  }

  /* 鼠标悬停在按钮上时的样式 */
  .file-upload-container button:hover {
    background-color: #0063f7;
  }

  .programbox {
    display: flex;
    height: 100%;
    justify-content: flex-start;
  }
  .generatebbtn {
    margin-top: 50px;
    text-align: center;
  }
  .address {
    text-align: center;
    margin-top: 60px;
  }
  .contentText {
    width: 33%;
  }
</style>
